<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		/* 为属性设置影藏数据 */
		/* [ 属性选择器]{属性的内容} */
		[v-cloak] {
			display: none;
		}
	</style>
	<body>
		
		<div id="app" v-cloak>
			<!-- 1.1指令练习v-cloak 
			当浏览器解析js前、用户看到的是是{{msg}}，加载完了后替换我们的数据
			
			需求：不想用户看到没有解析的数据，使用v-cloak指令-->
			<!--1. 测试v- cloak -->
			<h1>{{msg}}</h1>
			
			<!--2. v-text 使用方式，直接在标签里就可以显示数据，不用在标签了写{{}} 这种写法
			给标签的元素的innertext赋值-->
			
			<!--3. 测试v-text -->
			<h2 v-text="msg"></h2>
			
			
			<!-- 4.测试v-html ,让浏览器解析html的语法-->
			<span>{{html}}</span>
			<span v-html="html"></span>
			
			<!-- 5.需求：只想展现{{msg}} ，不需要vue解析
			  v-pre 直接跳过，不解析
			 -->
			 <span v-pre>{{msg}}</span>
			 <hr />
			 <!-- 6.需求：元素只解析一次 -->
			<span>{{one}}</span>
			<span v-once>{{one}}</span>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
		const app=new Vue({
			el: "#app",
			data: {
				//工作中的字符串写法，提倡单引号'';
				msg: "测试数据",
				html: '<h1>v-html测试</h1>',
				one:'数据只解析一次'
				// 获取相对于的数据的值直接 app.one
				}
			
		})
			
		</script>
	</body>
</html>
